<template>
  <div class="cascader">
    <div
      style="
        text-align: center;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        padding: 0 16px;
        align-items: center;
        height: 44px;
        position: relative;
      "
    >
      <span style="color: rgb(150, 151, 153)" @click="emit('onClose')">
        {{ "取消" }}</span
      >
      <span
        style="
          font-size: 16px;
          font-weight: 600;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 12px;
        "
      >
        {{ label }}</span
      >
      <span style="color: rgb(25, 137, 250)" @click="emit('onSubmit')">
        {{ "确认" }}</span
      >
    </div>
    <van-tabs v-model:active="active">
      <van-tab :title="title" style="padding: 24px">
        <div
          v-for="(item, index) in options"
          style="
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <span style="flex: 1" @click="onClick(item, index)">{{
            item.text
          }}</span>
          <van-checkbox
            v-if="item.children?.length === 0 || !item.children"
            v-model="item.checked"
          ></van-checkbox>
        </div>
      </van-tab>
      <van-tab :title="subTitle" style="padding: 24px" v-if="needSub">
        <div
          v-for="item in options[inactiveIndex].children"
          style="
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <span style="flex: 1" @click="onSelect(item)">{{ item.text }}</span>
          <van-checkbox v-model="item.checked"></van-checkbox>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup lang="ts">
import { PropType } from "vue";
type Item = {
  text: string;
  value: string;
  checked?: boolean;
  children: Item[];
};
const props = defineProps({
  options: {
    type: Array as PropType<Array<Item>>,
    required: true,
  },
  label: String,
  needSub: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["onClose", "onSubmit"]);
const active = ref(0),
  inactiveIndex = ref(0),
  title = ref("请选择"),
  subTitle = ref("请选择");
const onClick = (data: Item, index: number) => {
    if (data.children?.length === 0 || !data.children) {
      return (data.checked = !data.checked);
    }
    active.value = 1;
    inactiveIndex.value = index;
  },
  onSelect = (data: Item) => {
    data.checked = !data.checked;
  },
  onChange = () => {};
</script>
